<!-- 选择地面或列车的控制器 -->
<template>
        <el-select v-model="value" @change="emits('update:modelValue', value)" reserve-keyword
        :readonly="readonly"   
        placeholder="Please enter a keyword" @visible-change="updateOptions" :loading="loading" style="flex-grow: 1">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
</template>
<script lang="ts" setup>
import { onMounted, ref, defineProps, watch, defineEmits } from 'vue'
import { getDeviceConfigs } from "../api"
import { ElSelect } from 'element-plus'

const props = defineProps({
    modelValue: { type: String, required: true },
    readonly: { type: Boolean, default: false },
})

const emits = defineEmits(['update:modelValue'])

interface ListItem {
    value: string
    label: string
}

const options = ref<ListItem[]>([])
const value = ref<string>("")
const loading = ref(false)

watch(() => props.modelValue, () => {
    value.value = props.modelValue
})

onMounted(() => {
    value.value = props.modelValue
})

const updateOptions = () => {
    if (options.value.length == 0) {
        loading.value = true
        getDeviceConfigs().then((res) => {
            loading.value = false
            options.value = res.map((item) => {
                return { value: item.device_name, label: item.device_name }
            })
            loading.value = false
            console.log(options.value)
        })
    }
}

</script>